<script setup>
import { ref,onMounted,computed } from 'vue';
import { getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { getBookInformation } from '@/apis/bookInformation';
import Post from '@/views/BookInformation/components/post.vue';
import commentCard from './commentCard.vue';
const route = useRoute();
const { proxy } = getCurrentInstance();
const comments = ref([]);
const bookInfo = ref({}); 
const drawer = ref(false);

const getComment = async () => {
  bookInfo.value = await getBookInformation(route.params.id,proxy);
  console.log(bookInfo.value);
  comments.value = bookInfo.value.comment;
  console.log(comments.value);
};
const sendPost = () => {
  drawer.value = true;
};
onMounted( async () => {
 await getComment();
  // [...comments.value].sort((a, b) => b.time_submitted - a.time_submitted);
  // console.log(comments.value);
});
</script>
<template>
  <div class="information">
    <div class="word-title">
      <p class="bookName">《{{ bookInfo.name }}》</p>
    </div>
    <div>
      <p class="bookPostNumber">全部帖子</p>
    </div>
    <div>
      <p class="bookPostNumber">共 {{ comments.length? comments.length : 0 }} 条评论</p>
    </div>
    <el-button type="danger" style="margin-left: 450px" @click="sendPost">我要发贴</el-button>
  </div>
  <el-divider></el-divider>
  <div class="commentList">
    <div class="comment" v-for="(comment, index) in comments" :key="index">
      <commentCard :comment-content="comment.content" :time="comment.time_submitted" :username="comment.user_name"
        :img_urls="comment.user_avatar"></commentCard>
    </div>
  </div>
  <!-- <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="comments.length" :page-size="commentsPerPage"
      @current-change="handlePageChange">
    </el-pagination>
    <el-select v-model="commentsPerPage" placeholder="每页显示条数" @change="handleCommentsPerPageChange"
      style="width: 120px; margin-left: 10px;">
      <el-option label="5 条/页" :value="5"></el-option>
      <el-option label="10 条/页" :value="10"></el-option>
      <el-option label="20 条/页" :value="20"></el-option>
    </el-select>
  </div> -->
  <div>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" class="drawer">
      <Post></Post>
    </el-drawer>
  </div>
</template>

<style scoped>
.bookName {
  font-size: 20px;
  font-weight: bolder;
  margin: 20px;
}

.information {
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.bookPostNumber {
  font-size: 15px;
  margin: 30px 0 30px 10px;
  opacity: 0.5;
}

.commentList {
  /* 添加必要的样式 */
}

.comment {
  /* 添加必要的样式 */
}

.pagination {
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.drawer {
  z-index: 100000;
}
</style>